<template>
  <div class="content">
        <TableLayout form-title="">
            <!-- 查询条件 start-->
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="86px"  slot="form"  :label-position="labelPosition" :rules="rules" ref="ruleForm">          
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="评价人" >
                            <el-input v-model.trim="formInline.userName" placeholder="请输入姓名关键字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="eId">
                           <el-input v-model.trim="formInline.eId" placeholder="请输入e学云ID号" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="评论内容">
                            <el-input v-model.trim="formInline.content" placeholder="请输入内容关键字"></el-input>   
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="评论时间">
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始时间" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" format="yyyy-MM-dd" placeholder="选择结束时间" :picker-options="formInline.pickerOptions2" @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
                </div>
            </el-form>
            <!-- 查询条件 end-->
            <div class="table-title" slot="table-title">
            </div>
            <!-- 表格 start -->
            <el-table :data="commentList" border style="width: 100%"  v-loading="loading" ref="formInline" class="comment-list">
                <!-- <el-table-column type="index" width="50" label="序号" align="center"></el-table-column> -->
                <el-table-column label="评论人" align="center" >
                     <template scope="scope">
                        <span>{{scope.row.userName | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="e学云ID号" prop="sXiaoxinCode" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.sXiaoxinCode | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="评论内容" prop="sCommentContent" align="center" >
                    <template scope="scope">
                        <span>{{scope.row.sCommentContent | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="评论时间" prop="sCreateTime" align="center" width="170">
                     <template scope="scope">
                        <span>{{scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="回复内容"  align="center" width="300" >
                    <template scope="scope">
                        <span>{{scope.row.sReplyContent | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="回复时间" prop="replyTime" align="center" width="170">
                    <template scope="scope">
                        <span>{{scope.row.sReplyTime | isNull}}</span>
                    </template>
                </el-table-column>  

                 <el-table-column label="操作" align="left" width="160">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="modify(scope.row)">{{scope.row.sReplyContent == null?'回复':'修改回复'}}</el-button> 
                        <el-button type="text" class="btn-success" @click="changeStatus(scope.row)">{{scope.row.sIsHide== 1 ?'显示':'隐藏'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            <!-- 表格 end -->
        </TableLayout>

        <!-- 修改回复/回复对话框 start-->
        <reply-dailog :visible="replyDialog" v-if="replyDialog.isShow" @update-list="searchFetchData"></reply-dailog>
        <!-- 修改回复/回复对话框 end-->
  </div>
</template>

<script>
import moment from 'moment';
import TableLayout from 'components/TableLayout';
import replyDailog from './replyDialog';
import { getCommentListByParams, modifyCommentStateByPid} from 'api/onlineLesson';
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
    name: 'commentDetailList',
    components: { TableLayout, replyDailog },
    data() {
        return {
            lessonId: '', // 评论Id
            labelPosition: 'right',
            formInline: {
                userName: '', // 评论人
                eId: '', // e学云ID
                content: '', // 评论内容
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {}
            },
            replyDialog: {
                isShow: false,
                info: null
            },
            commentList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            schoolLoading: false,
            rules: {
                eId: [
                    { pattern: /^\d+$/, message: '请输入有效的e学云ID号', trigger: 'blur'},
                    { pattern: /^\d{9}$/, message: '请输入完整的e学云ID号', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.lessonId = this.$route.params.lId;
        // 根据课程ID获取评论列表
        this.searchFetchData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    methods: {
           // 全局获取行数
        ...mapActions(['ChangePageSize']),
        
         // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },

        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

         // 功能：开始日期选择
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },

    // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() ;
                }
            };
        },

        // 查询
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
            
        },

        // 查询数据方法
        searchFetchData() {
            this.loading = true;
            let startTemp = this.formInline.startDate == ''?'' :moment(this.formInline.startDate).format('YYYY-MM-DD') + ' 00:00:00';
            let endTemp = this.formInline.endDate == ''?' ' :moment(this.formInline.endDate).format('YYYY-MM-DD') + ' 23:59:59';
            getCommentListByParams(
                this.lessonId,
                this.formInline.userName, 
                this.listQuery.page,
                this.config.pageSize,
                this.formInline.eId, 
                this.formInline.content, 
                startTemp, 
                endTemp).then(res => {
                    this.commentList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination.total;
                    this.loading = false;
                })
        },

        // 回复或者修改回复
        modify(item) {
            this.replyDialog.isShow = true;
            this.replyDialog.info = item;
        },

        // 显示或者隐藏
        changeStatus(item) {
            let message = '确定隐藏该评论？如有回复，回复也会被隐藏';
            if (item.sIsHide) message = '确认显示该评论？如有回复，回复也会被显示' ;
            this.$confirm(message, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                let status = 1; // 当前为隐藏状态
                if (item.sIsHide) status = 0; // 变更为显示
                // 调用接口
                modifyCommentStateByPid(item.pId, status).then(res => {
                    // console.log('评论', res);
                    this.$message({
                        type: 'success',
                        message: '更改状态成功!'
                    });     
                    // this.$message.error('更改状态失败！');
                    // 重新加载页面
                    this.searchFetchData();
                })     
            }).catch((e) => {
                // console.log(e)        
            });
        }
        
    }
  
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>


